<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery写代码</title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: #000000;
				
			}
			
			.div1{
				width: 100%;
				text-align: center;
			}
			#div3>#in{
				border: 1px solid rosybrown;
				border-radius: 10px;
				outline: 0;
				text-align: center;
				width: 300px;
				height: 40px;
				font-size: 16px;
				font-weight: 1000;
				background-color: rgb(153,153,153);
				
			}
			#div3>#btn{
				background-color: orangered;
				border: 1px solid red;
				border-radius: 10px;
				height: 40px;
				border: 0;
				width: 80px;
				text-align: center;
				vertical-align: bottom;
			}
			
			#div2{
				margin-top: 40px;
				width: 390px;
				text-align: center;
				margin-left: auto;
				margin-right: auto;
			}
			#div2>div{
				width: 390px;
				height: 40px;
				margin-bottom: 10px;
				line-height: 40px;	
			}
			#div2>div>.c1{
				float: left;
				width: 80%;
				text-align: center;
				background-color: rgb(106,203,170);
			}
			#div2>div>.c2{
				width: 20%;
				float: right;
				text-align: center;
				height: 40px;
				outline: 0;
				border: 0;
				padding: 0;
				margin: 0;
				background-color: rgb(106,203,170);
			}
			
			
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2" class="div1">
				<div style="background-color: rgb(106,203,170);" v-if="display" v-for="x in lists">
					<div class="c1">{{x}}</div>
					<button class="c2" v-on:click="dels(x)">X</button>
				</div>
			</div>
			<div id="div3" class="div1">
				<input type="text" name="in" id="in" v-model="insert" />
				<button id="btn" v-on:click="sureBtn">确定</button>
			</div>
		</div>
		
		<script type="text/javascript">
			list1 = ['西瓜','苹果','香蕉']
			app1 = new Vue({
				el:'#div1',
				data:{
					insert:null,
					display:true,
					lists:list1
				},
				methods:{
					sureBtn:function(){
						a = this.insert
						
						if(a==null){
							return
						}else{
							this.lists=list1.push(a)
							console.log(this.lists)
							this.insert=null
						}
					},
					dels:function(x){
						//x.display=false
						this.display=false
					}
				}
			})
		</script>
	</body>
</html>
